<template>
  <!--  筛选项-->
  <SearchForm
      v-show="isShowSearch"
      :searchColumns="props.searchColumns"
  />

  <!-- 表格主体 -->
  <div class="card table-main">
    <!-- 表格头部 操作按钮 -->
    <div class="table-header">
      <div class="header-button-lf">
        <slot name="tableHeader"/>
      </div>
      <div class="header-button-ri">
        <slot name="toolButton">
          <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList"/>
          <el-button
              v-if="showToolButton('search') && searchColumns?.length"
              :icon="Search"
              circle
              @click="isShowSearch = !isShowSearch"
          />
          <!--          <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click=""/>-->
          <el-tooltip effect="light" content="说明文档" placement="top">
            <el-button v-if="showToolButton('description')" :icon="InfoFilled" circle @click=""/>
          </el-tooltip>
        </slot>
      </div>
    </div>

    <!--表格数据主体-->
    <slot name="table"></slot>

    <!-- 分页组件 -->
    <slot name="pagination">
      <Pagination
          v-if="pagination"
          :pageable="pageable"
          :handle-size-change="handleSizeChange"
          :handle-current-change="handleCurrentChange"
      />
    </slot>


  </div>

</template>

<script setup>
import {computed, ref} from "vue";
import SearchForm from './SearchForm.vue'
import Pagination from './Pagination.vue'
import {Operation, Refresh, Search, InfoFilled} from "@element-plus/icons-vue";

const props = defineProps({
  // 需要搜索的配置项
  searchColumns: {
    required: true,
    default: []
  },
  searchParam: {},
  searchCol: () => ({xs: 1, sm: 2, md: 2, lg: 3, xl: 4}),

  // 是否带有纵向边框 ==> 非必传（默认为true）
  border: {
    default: true
  },

  toolButton: {
    default: ["refresh", "setting", "search", "description"]
  },

  // 是否需要分页组件 ==> 非必传（默认为true）
  pagination: {
    default: true
  },
})

const emit = defineEmits(["getTableList"]);
// 是否显示搜索模块
const isShowSearch = ref(true);

// 控制 ToolButton 显示
// "refresh" | "setting" | "search" | "description"
const showToolButton = (key) => {
  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
};

const getTableList = async () => {
  emit("getTableList", pageable)
}



let pageable = ref({
  // 当前页数
  pageNum: 1,
  // 每页显示条数
  pageSize: 10,
  // 总条数
  total: 0
})

const handleSizeChange = () => {
  emit("getTableList")
}

const handleCurrentChange = () => {
  emit("getTableList")
}


</script>

<style scoped lang="scss">


</style>
